<template>
  <div id="main" class="flex flex-align-center">
    <div class=" login-card">
      <el-card>
        <div slot="header" class="clearfix">
          <span>管理员登陆</span>
        </div>
        <el-form :model="login" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="用户名" prop="userName">
            <el-input v-model="login.userName"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="passWord">
            <el-input v-model="login.passWord" type="password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">登陆</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      login:{
          userName:"",
          passWord:""
      },
      rules:{
          userName:[
            {required:true,message:'请填写用户名',trigger:'blur'}
          ],
          passWord:[
            {required:true,message:'请填写密码',trigger:'blur'}
          ],
      }
    }
  },
  methods:{
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.Api.login(this.login).then((response)=>{
              console.log(response);
              if(response.data.token){
                  this.$store.commit('LOGIN_SUCCESS',{token:response.data.token});
                  this.$router.push('/');
                  this.$message.success('登陆成功！');
              }else {
                this.$message.error(response.data.message);
              }
          })
        }

      });
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.login-card{
  margin: 0 auto;
  width: 400px;
}
</style>
